<template>
  <div id="app">
        <div class="content">
    <div class="bbody">
        <div class="head">
            <span class="colorg"><router-link class="rlink" to="/">首页</router-link></span>
            <span class="colorg" style="margin-left: 10px;">></span>
            <span style="margin-left: 10px;">往期命中</span>
        </div>
        <div class="tblist">
            <div class="guetable">
                <table class="tabletg" width="90%" align='center' border="1px solid" bordercolor="#D9D9D9" cellspacing="0" rules=rows style="border-collapse:collapse;">
                    <tr class="guetitle colortitle">
                    <th>时间</th>
                    <th>轮次</th>
                    <th>主队</th>
                    <th>比分</th>
                    <th>客队</th>
                    <th>参考结果</th>
                    <th>操作</th>
                    </tr>
                    <tr v-for="(item, index) in guess" :key="index">
                    <td class="colorlis1" align='center' valian='middle'>{{ item.matchTime }}</td>
                    <td class="colorlis2" align='center' style="width:100px;" valian='middle'>{{ item.matchRound }}轮</td>
                    <td class="colorlis1 posir" style="width:220px;" align='center' valian='middle'><img class="qdimg posia" style="left:0;bottom:7px;" :src="item.zranksPhoto" alt="">{{ item.zName }}</td>
                    <td class="colorlisvs" align='center' valian='middle'>{{ item.zscore }} ：{{ item.kscore }}</td>
                    <td class="colorlis1 posir" style="width:220px;" align='center' valian='middle'>{{ item.kName }}<img class="qdimg posia" style="right:0;bottom:7px;" :src="item.kranksPhoto" alt=""></td>
                    <!-- <td class="colorlis1" align='center' valian='middle'>主胜</td> -->
                    <td v-if="item.zscore>item.kscore" class="colorlis1" align='center' valian='middle'>主胜</td>
                    <td v-else-if="item.zscore<item.kscore" class="colorlis1" align='center' valian='middle'>客胜</td>
                    <td v-else class="colorlis1" align='center' valian='middle'>平局</td>
                    <td align='center' valian='middle'><div class="ckxq pointer" @click="chakanxiangqin($event)" :data-id="item.id">查看详情</div></td>
                    </tr>
                    <!-- <tr>
                    <td>row 2, cell 1</td>
                    <td>row 2, cell 2</td>
                    </tr> -->
                </table>
            </div>
            
            <div style="height:500px"></div>
        </div>
    </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      lianxi:'',
      xqlisto:'',
      sta:'1',
      guess:[],
    }
  },
  created() {
      // this.list8 = JSON.parse(window.localStorage.getItem('list8'))
      // this.listqt = JSON.parse(window.localStorage.getItem('listqt'))
      // console.log(this.list8 = JSON.parse(window.localStorage.getItem('list8')))
      // console.log(this.listqt = JSON.parse(window.localStorage.getItem('listqt')))
      console.log(JSON.parse(window.localStorage.getItem('lianxi')))
      // this.lianxi = window.localStorage.getItem('lianxi')
      // this.lianxi = JSON.parse(window.localStorage.getItem('lianxi'))
      // this.wangqiminz()
  },
  mounted() {
     this.lianxi = JSON.parse(window.localStorage.getItem('lianxi'))
      this.wangqiminz()
  },
  methods: {
      async wangqiminz() {
          var sst = new FormData()
          sst.set('state',this.sta)
          const { data: res } = await this.$http.post('app/zqMatchAnalysis/list',sst)
        console.log(res)
        if (res.code !== 0) return console.log('获取往期命中失败')
        console.log('获取往期命中成功')
        for(var i=0; i<res.data.length; i++) {
          if(res.data[i].state == 1) {
            console.log(res.data[i])
            this.guess.push(res.data[i])
          }
        }
        // this.guess = res.data
      },
      chakanxiangqin(event) {
        var target = event.target || window.event.srcElement,
        //获取对应元素的id值
        id = target.getAttribute('data-id')
        for(var i=0; i<this.guess.length; i++) {
        if(id==this.guess[i].id) {
          this.xqlisto = this.guess[i]
        }
      }
      console.log(this.xqlisto)
      var chuansongxq = ''
      chuansongxq = this.xqlisto
      this.$router.push({
        name:'details',
        params: {
          detailsxq:chuansongxq
        }
      })
      }
  }
}
</script>

<style lang="less" scoped>
@import "../assets/css/font.css";
@import "../assets/css/index.css";
*{
			padding: 0;
			margin: 0;
		}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

  .content {
    width: 90%;
  .bbody {
      height: 100%;
      width: 100%;
      background-color: #fff;
      .head {
        height: 50px;
        padding-left: 25px;
        line-height: 50px;
        border: 1px solid #EEEEEE;
      }
      .tblist {
          margin-top: 45px;
          .guetable {
            .tabletg {
              margin: auto;
              .guetitle {
              background-color: #F3F3F3;
              height: 50px;
            }
            }
          }
      }
  }
  }

td {
    border-bottom: 1px solid #D7D7D7;
    height: 50px;
}
.ckxq {
  height: 30px;
    line-height: 30px;
    width: 75px;
    border: 1px solid #408ED6;
    color: #408ED6;
    border-radius:3px;
}
// .ckxql {
//   color: #408ED6 !important;
//   text-decoration: none;
// }

.div-inline{ display:inline-block} 

#nav {
  margin-top: 20px;
  text-align: center;
  width: 100%;
  height: 50px;
  background:rgba(0,0,0,0.1);
}

.database {
  width: 100px;
  height: 50px;
  text-align:center;
  line-height: 50px;
  margin-left: 50px;
  padding-right: 20px;
  font-size: 20px;
  color: #FFFFFE;
}

.list {
  width: 70px;
  height: 50px;
  text-align:center;
  line-height: 50px;
  margin-left: 45px;
  color: #FFFFFE;
}


.fleft {
  float: left;
}

.bottom {
  position: relative;
  bottom: 0;
  color: #FFFFFF;
  height: 100px;
  width: 100%;
  background-color: #191C21;
}
.gg {
  position: absolute;
  margin-left: 25%;
  margin-top: 20px;
}
.right0 {
  margin-left: 70px;
}
.bbt {
  margin-top: 10px;
}

</style>
